<script setup>
    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    let data = $ref([
        { name: '镇内', value: 3234 },
        { name: '区内镇外', value: 3234 },
        { name: '市内区外', value: 3234 },
        { name: '省内市外', value: 3234 },
        { name: '省外', value: 3234 }
    ])

    const emit = defineEmits(['showDataSearch'])

    const showSearch = () => {
        emit('showDataSearch')
    }

</script>

<template>
    <div class="population-wrap">
        <div 
            class="card-title pointer"
            @click="showSearch"
        >
            <img src="../../../assets/images/card-title-icon-2.png">
            人口分布
        </div>

        <div class="population-list flex">
            <div 
                v-for="(item, index) in props.list"
                :key="index"
                class="item"
            >   
                <div class="box">
                    <div class="name">{{ item.name }}</div>
                    <div class="count">
                        <p>{{ item.numb }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .population-wrap{
        width: 100%;
        margin-top: 28px;

        .population-list{
            margin: 30px 36px 0;
            flex-wrap: wrap;
            background: url('../../../assets/images/population-card-center.png') 104px -20px no-repeat;
            background-size: 184px 184px;

            .item{
                width: 50%;
                margin-bottom: 38px;
                
                &:nth-child(even){
                    display: flex;
                    justify-content: flex-end;
                }

                .box{
                    width: 101px;
                    text-align: center;

                    .name{
                        color: #fff;
                    }

                    .count{
                        width: 101px;
                        height: 54px;
                        background: url('../../../assets/images/population-icon-1.png') center bottom no-repeat;
                        margin-top: 10px;
                        
                        p{
                            font-size: 30px;
                            color: #00F0FF;
                            font-weight: bold;
                        }
                    }
                }

                &:nth-child(2) .box .count{
                    background: url('../../../assets/images/population-icon-2.png') center bottom no-repeat;
                    p{
                        color: #FCC726;
                    }
                }
                &:nth-child(3) .box .count{
                    background: url('../../../assets/images/population-icon-3.png') center bottom no-repeat;
                    p{
                        color: #FD6666;
                    }
                }
                &:nth-child(4) .box .count{
                    background: url('../../../assets/images/population-icon-4.png') center bottom no-repeat;
                    p{
                        color: #D086FF;
                    }
                }

                &:nth-child(5){
                    margin: -20% 0 0 36%;
                    .box .count{
                        background: url('../../../assets/images/population-icon-5.png') center bottom no-repeat;
                        p{
                            color: #7DB9FE;
                        }
                    }
                }
            }
        }
    }
</style>